<html>
    <head>
        <title>模板</title>
        <link rel="stylesheet" href="../../assets/bundle.element.css">
        <link rel="stylesheet" href="../../style.css">

        <style>


        </style>

    </head>
    <body>
        <div class="page" id="page-vue">
        
            <div class="page-title">用电监测 › 运行环境 › 通讯状态</div>
            <div class="page-main">
                <el-row>
                    <el-col :span="4">
                        <dev-tree v-on:click-node="aa" v-bind:ischeckbox="true"></dev-tree>
                    </el-col>
                    <el-col :span="20">
                        <div class="page-head">
                                <el-form :inline="true" style="margin-bottom: 0px;">
                                    <el-form-item label="">
                                        <el-date-picker type="date" v-model="query.beginTime" placeholder="起始" style="width: 150px;"></el-date-picker>
                                        -
                                        <el-date-picker type="date" v-model="query.endTime" placeholder="截止" style="width: 150px;"></el-date-picker>
                                    </el-form-item>
            
                                    <el-form-item>
                                        <el-button type="primary" @click="search">查询</el-button>
                                    </el-form-item>
                                </el-form>
    
                            
                            </div>
                            <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
                                    <el-tab-pane label="分时用电" name="tabHour">
                                            <el-form :inline="true" style="margin-bottom: 0px;">
                                                    <el-form-item label="电价方案" size="mini">
                                                            <el-select placeholder="" v-model="query.schemeId" style="width: 150px;">
                                                                <el-option value="1" label="华南区方案"></el-option>
                                                                <el-option value="2" label="华东区方案"></el-option>
                                                            </el-select>
                                                        </el-form-item>
        
                                                        <el-form-item size="mini">
                                                                <el-button type="primary" @click="search">查询</el-button>
                                                            </el-form-item>
        
                                                        <el-form-item size="mini" style="float: right;">
                                                                <el-button type="primary" @click="onAddSchemeClick">新增方案</el-button>
                                                                <el-button type="primary" @click="search">修改方案</el-button>
                                                                <el-button type="primary" @click="search">删除方案</el-button>
                                                        </el-form-item>
                                            </el-form>
        
                                            <el-row>
                                                <el-col :span="24">
                                                    <div class="chart-outer">
                                                        
                                                    </div>
                                                </el-col>
                                            </el-row>
        
                                            <el-row :gutter="20">
                                                <el-col :span="12">
                                                    <div class="chart-outer" style="height: 250px;">
                                                        <h6>电量统计</h6>
                                                        <el-table
                                                            :data="tableDayEle"
                                                            border
                                                            stripe
                                                            size="mini"
                                                            style="width: 100%;">
                                                            <el-table-column
                                                                prop="typeName"
                                                                label="电量分类">
                                                            </el-table-column>
                                                            <el-table-column
                                                                prop="eValue"
                                                                label="用电量 (kWh)">
                                                            </el-table-column>
                                                            <el-table-column
                                                                prop="eFee"
                                                                label="电费 (RMB)">
                                                            </el-table-column>
                                                        </el-table>
                                                    </div>
                                                </el-col>
        
                                                <el-col :span="12">
                                                        <div class="chart-outer" style="height: 250px;">
                                                            <h6>电量占比</h6>
                                                            <chart-pie v-bind:data="chartERatioData"></chart-pie>
                                                        </div>
                                                </el-col>
                                            </el-row>
        
                                           
                                    </el-tab-pane>
                                    <el-tab-pane label="日用电" name="tabDay">
                                        <div class="chart-outer" >
                                        </div>
                                        <p class="ele-title">2018-12-12 日用电量：4009 kWh</p>
                                        
                                    </el-tab-pane>
                                    <el-tab-pane label="月用电" name="tabMonth">
                                        <div class="chart-outer" >
                                        </div>
                                        <p class="ele-title">2018-12 月用电量：4009 kWh</p>
        
                                        <div class="chart-outer" >
                                            环比
                                        </div>
        
                                        <div class="chart-outer" >
                                            同比
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="年用电" name="tabYear">
                                            <div class="chart-outer" >
                                                </div>
                                                <p class="ele-title">2018 年用电量：4009 kWh</p>
                
                                                <div class="chart-outer" >
                                                    环比
                                                </div>
                                    </el-tab-pane>
                                </el-tabs>
                            <el-table :data="items" height="250" :stripe="true" :border="true" size="mini" style="width: 100%" @selection-change="onCheckbox">
                                    <el-table-column type="selection" width="55"></el-table-column>
                                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                                    <el-table-column prop="stationName" label="站点"></el-table-column>
                                    <el-table-column prop="roadName" label="回路名称"></el-table-column>
                                    <el-table-column prop="describe" label="事件描述"></el-table-column>
                                    <el-table-column prop="level" label="报警级别">
                                        <template slot-scope="scope">
                                            <span class="level">{{scope.row.level}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="createTime" label="事件发生时间" width="150"></el-table-column>
                                    <el-table-column prop="value" label="当前值"></el-table-column>
                                    <el-table-column prop="limit" label="阔值"></el-table-column>
                                    <el-table-column prop="status" label="当前状态">
                                        <template slot-scope="scope">
                                            <span class="level">{{scope.row.status}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="190px" fixed="right" align="center">
                                        <template slot-scope="scope">
                                            <el-button size="mini" round icon="el-icon-edit" v-on:click="edit(scope.$index,scope.row)">
                                            </el-button>
                
                                            <el-button size="mini" round icon="el-icon-delete" v-on:click="remove(scope.$index,scope.row)">
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                    </el-col>
                </el-row>
        
            </div>
        
            <div class="page-footer">
                <el-pagination background layout="prev, pager, next" :total="50" :current-page.sync="currentPage" @current-change="onChangePage">
                </el-pagination>
            </div>
        
            <!--编辑弹窗-->
            <el-dialog title="报警派单" :visible.sync="editAlarmVisible" width="800">
                <el-card>
                    <el-form :inline="true" label-width="100px">
                        <el-form-item label="报警编号(*)">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="站点编号(*)">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="回路编号(*)">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="接收人(*)">
                            <el-input></el-input>
                        </el-form-item>
                        <el-col :span="24">
                            <el-form-item label="报警详情(*)">
                                <el-input type="textarea" style="width:550px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-form-item>
                            <el-button type="primary" size="mini" round style="margin-left: 100px;">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-dialog>
        
        
        </div>


        <script type='text/javascript' src='../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../js/component.js' charset='utf-8'></script>

        <script>

                var vuePage=new Vue({
                    el:'#page-vue',
                    data:{
                        tabName:'',
                        currentPage:1
                    },
                    methods:{
                        search:function(){
                            alert(this.status);
                        },

                        aa(data){},
    
                        remove:function(index,row){
                            this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(()=>{

                                this.$message({
                                    message: '删除成功！',
                                    type: 'success'
                                });
                            });
                        },

                        
                        onCheckbox(val){
                            this.selectIdArr = val.map(v=>{return v.id});
                        },
                        onChangePage(page){
                            alert(page);
                        },
                        onTabClick(tab,event){

                        }
                    },
                    created:function(){
    
                        this.beginTime = TimeUtil.convertToString(new Date()).substr(0,10);
                        this.endTime = this.beginTime;
                        
                    },
                    mounted:function(){
 
                    }
                });
    
    
            </script>
    </body>
</html>